{% extends "Industrial_Logs/base.html" %} {% block header %} {% endblock header %} {% block content %}
    <script src="{{STATIC_URL}}dist/js/P_TH.js"></script>
    <script src="{{STATIC_URL}}dist/js/PTH_PM.js"></script>
    <script src="{{STATIC_URL}}dist/js/OtherCharts.js"></script>
        <link rel="stylesheet" href="{{STATIC_URL}}css/pageStyle.css" charset="utf-8">

      <div id="back" class="main">
        <h1>温湿度-PM/压力</h1>
        <div id="all"   class="chart-container">
            <div style="height: 60%;margin:0px" id="PTH1"  class="chart-container" name="box">
{#                <button style="float:right; margin:10px 30px 0px 15px; color:white;display:inline-block; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showP(1)">湿度</button>#}
{#                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; height:30px; background: #0e5b44;border-radius: 10px" onclick="showP(0)">温度</button>#}
                <div style="margin: 0px 0px 0px 0px; border:2px solid #666; width:99%;height: 100%;" id="P_TH_0"  class="chart-container" name="boxP">温度/压力</div>
{#                <div style="margin: 0px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display: none" id="P_TH_1"  class="chart-container"name="boxP">湿度/压力</div>#}
            </div>

            <div style="border:2px solid #666;height: 60%;margin:0px; display:none" id="PTH2"  class="chart-container" name="box">
{#                <button style="float:right; margin:10px 30px 0px 15px; color:white;display:inline-block; height:30px; background: #0e5b44;border-radius: 10px;" onclick="showPM(1)">湿度</button>#}
{#                <button style="float:right;  margin:10px 5px 0px 15px; color:white; display:inline-block; height:30px; background: #0e5b44;border-radius: 10px" onclick="showPM(0)">温度</button>#}
                <div style="margin: 0px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;" id="PTH_PM_0"  class="chart-container" name="boxPM">温度/PM</div>
                <div style="margin: 0px 0px 0px 0px; border:2px solid #666; width:99%;height: 85%;display:none" id="PTH_PM_1"  class="chart-container" name="boxPM">湿度/PM</div>
            </div>


            <div style="width:100%; height: 40%;margin:0px" id="PTH"  class="chart-container" >
                 <div style="border:2px solid #666; width:50%;height: 90%;float:left;margin-right:0px" id="P_TH_11"  class="chart-container" onclick="show(1)"></div>
                <div style="border:2px solid #666; width:49%;height: 90%;float:left;margin:1px 0px 0px -5px;" id="PTH_PM_11"  class="chart-container" onclick="show(2)"></div>
            </div>
{#            <div style="border:2px solid #666;width:40%;height: 80%;float:left" id="PTH_PM_2"  class="chart-container"></div>#}
        </div>
    </div>
<script>
var  width = $("#P_TH_0").width();
var  height = $("#P_TH_0").height();
$("#P_TH_1").css("width", width).css("height", height);
$("#PTH_PM_0").css("width", width).css("height", height);
$("#PTH_PM_1").css("width", width).css("height", height);

function show(id) {
    var boxs = document.getElementsByName("box")
    for (var i = 0; i < boxs.length; i++) {
        if (boxs[i].id == "PTH" + id) {
            boxs[i].style.display = ""
        }else
        {
            boxs[i].style.display = "none"
        }
    }
}
function showP(id) {
    var box1s = document.getElementsByName("boxP")
    for (var i = 0; i < box1s.length; i++) {
        if (box1s[i].id == "P_TH_" + id) {
            box1s[i].style.display = ""
        }else
        {
            box1s[i].style.display = "none"
        }
    }
}
function showPM(id) {
    var box1s = document.getElementsByName("boxPM")
    for (var i = 0; i < box1s.length; i++) {
        if (box1s[i].id == "PTH_PM_" + id) {
            box1s[i].style.display = ""
        }else
        {
            box1s[i].style.display = "none"
        }
    }
}
</script>
    <script>
    $(function () {
        $.ajax({
				url: "/getPPM",
				type: "POST",
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log(data);
                     P_TH_11(data);
                     P_TH_0(data);

				}
        });
        $.ajax({
				url: "/getPTH_PM",
				type: "POST",
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
                    console.log(data);
                    PTH_PM_11(data);
                    PTH_PM_0(data);

				}
        });
        $.ajax({
				url: "/getHPM",
				type: "POST",
                async: true,
                cache:false,
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法
				    {#console.log(data);#}
                    {#PTH_PM_2(data);#}
				}
        });
        P_TH_1();
        PTH_PM_1();


    })
    </script>
{% endblock content %}

